<template>
	<view class="kvGroup">
		
		<div class="layui-form-item" v-for="( item , index) in list" :key="index">
			
			<div class="layui-inline">
				<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<div class="inputGroup">
						<view class="inputGroup-addon">
							{{index+1}}
						</view>
						<input type="text" :value="item.value" @input="inputValue($event,index)" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			
			<div class="layui-inline">
				<text class="layui-icon layui-icon-add-circle"  @tap="add(index)"></text>
				<text class="layui-icon layui-icon-delete" v-if="index > 0 || list.length > 0" @tap="del(index)"></text>
			</div>
			
		</div>
		
		
		
	</view>
</template>

<script>
	export default {
		name : "kvGroup" ,
		props:{
			list : {
				type : Array,
				default:function(e){
					return [{key : "" ,value : ""}] ;
				}
			}
		},
		created : function(e){
			var list = this.list ;
			if (this.list.length == 0) {
				list.push(this.defaultEle());
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			inputKey:function(e , index){
				this.list[index]['key'] = e.detail.value ;
				console.log(this.list);
			},
			inputValue:function(e , index){
				this.list[index]['value'] = e.detail.value ;
				console.log(this.list);
			},
			add:function(index){
				this.list.splice(index+1,0, this.defaultEle());
			},
			del:function(index){
				this.list.splice(index,1);
			},
			defaultEle:function(e){
				return {
					key : "" ,
					value : ""
				};
			},
		}
	}
</script>

<style scoped lang="scss">
.inputGroup .inputGroup-addon{
	width: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.layui-icon{
	font-size: 20px;
	cursor: pointer;
	&+.layui-icon{
		font-size: 23px;
		margin-left: 10px;
		position: relative;
		top: 1.5px;
	}
	&:hover{
		color: #000;
	}
}
</style>
